<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<#include "/system/head.html"/>
<style>
	ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
</style>
<script type="text/javascript">
$(function(){
		$("#jvForm").validate();
});
var tree = null ;
var picPath;
var image;
function showMenu() {
	var productType = $("#productTypeName");
	var offset = $("#productTypeName").offset();
	if (tree == null) {
		tree = $("#browser").treeview({
			url: "../product/v_type.do"
		});
	}
	$("#menuContent").css({
		left : offset.left + "px",
		top : offset.top + productType.outerHeight() + "px"
	}).slideDown("fast");
	$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
	$("#menuContent").fadeOut("fast");
	$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
	if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(
			event.target).parents("#menuContent").length > 0)) {
		hideMenu();
	}
}
function type_selected(id,name){
	$("#productTypeName").val(name);
	$("#productType").val(id);
}

var index = 1;

var lastTr = null  ;
function add_proimg(){
	var table = $("table");
	var cloneTr = null ;
	var firstTr  = $("#firstTr");
	cloneTr = firstTr.clone(true);
	if(lastTr != null){
		lastTr =  cloneTr.insertAfter(lastTr);//把副本单元格对象添加到表格下方
	}else{
		lastTr =  cloneTr.insertAfter(firstTr);//把副本单元格对象添加到表格下方
	}
}

function del_proimg(obj){
	$(obj).parent().parent("tr").remove();
}

function preview(obj){
	var tr = $(obj).parent().parent("tr") ;
	var preImg = $("img",tr) ;
	preImg.attr("src",picPath);
	
}
function loadImage(ele) {
	
	picPath   = getPath(ele);
	image     = new Image();
	image.src = picPath;
	preview(ele);
}
function getPath(obj){
	if(obj){
		//ie
		if (window.navigator.userAgent.indexOf("MSIE")>=1){
			obj.select();
			obj.blur();
			// IE下取得图片的本地路径
			return document.selection.createRange().text;
		}
		//firefox
		else if(window.navigator.userAgent.indexOf("Firefox")>=1){
			if(obj.files){
				// Firefox下取得的是图片的数据
				return obj.files.item(0).getAsDataURL();
			}
			return obj.value;
		}
		return obj.value;
	}
}


</script>
</head>
<body>
<div class="box-positon">
	<div class="rpos"><@s.m "global.position"/>: 代理记账 - 新增合同</div>
	<form class="ropt">
		<input class="add" type="submit" value="<@s.m "global.add"/>" onclick="this.form.action='v_add.do';"/>
	</form>
	<div class="clear"></div>
</div> 
<div class="body-box">
	<div class="body-box">
		<@p.form id="jvForm" action="o_save.do"  labelWidth="10" enctype="multipart/form-data">
			<input type="hidden" name="typeId" id="productType"/>
			<@p.text colspan="2" 	label="产品名称" 	name="name" 		required="true" width="50"/> 
			<@p.text colspan="2" 	label="货号" 		name="code" width="50" /><@p.tr /> 
			<@p.text colspan="2" 	label="产品类别" 	name="productTypeName" id="productTypeName"  onclick="showMenu(); return false;" width="50"  /> 
			<@p.td colspan="4" label="品牌" width="25">
			 	<select id="brandId" name="brandId">
			 		<#list brandList as brand >
			 			<option value="${brand.code}">${brand.name}</option>
					</#list>
				</select>
			 </@p.td><@p.tr/>
			<@p.text colspan="2" 	label="采购价"   	name="basePrice"  	class="digits"	required="true" width="50"/>
			<@p.text colspan="2"	label="市场价" 	name="marketPrice"  class="digits" width="50"/> <@p.tr/>
			<@p.text colspan="4"  	label="销售价" 	name="sellPrice"  	class="digits" 	required="true" width="50"/><@p.tr/>
			<@p.td colspan="2" label="是否推荐" width="25">
				<input type="checkbox" name="commend" />
			</@p.td>
			<@p.td colspan="2" label="是否热卖" width="25">
				<input type="checkbox" name="hot"/>
			</@p.td> <@p.tr/>
			<@p.td colspan="4" 	label="产品图片">
				<input type="button" value="添加" onclick="add_proimg()"/>
			</@p.td>
			<@p.tr id="firstTr"/>
				<@p.td colspan="2" label="预览">
					<img src="" width="100px" height="100px"/>
				</@p.td> 
				<@p.file colspan="2"  	label="上传图片" 	name="proImg"  width="50" onchange='loadImage(this);'>
					<input type="button" value="删除" onclick="del_proimg(this)"/>
				</@p.file>
			<@p.tr/>
			<@p.textarea colspan="4"  	label="购买说明"  name="buyExplain"  	width="100"/><@p.tr/>
			<@p.editor colspan="4"  label="产品简介" name="description" width="50" /><@p.tr/>
			<@p.td colspan="4"><@p.submit code="global.submit"/> &nbsp; <@p.reset code="global.reset"/></@p.td>
		</@p.form>
	</div>
</div>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
	<ul id="browser" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
<#include "/common/alert_message.html"/>
</body>
</html>